<div class="content">
    <div id="example_title">
        <h1>Field Type: Switch</h1>
        New field type is introduced that allow
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="form" style="width: 750px">
</div>

<!--CODE-->
<script type="module">
import { w2form, w2popup } from '__W2UI_PATH__'

let form = new w2form({
    box: '#form',
    name: 'form',
    fields: [
        { field: 'file_name',  type: 'text', required: true, html: { label: 'File Name', attr: 'style="width: 300px"' } },
        { field: 'file_type', type: 'switch', required: true,
            options: {
                items: [
                    'Text', 'Mark Down', 'HTML', 'Other',
                    { id: 'some', tooltip: 'Some tooltip', icon: 'fa fa-star' },
                    { id: 'some2', tooltip: 'Some2 tooltip', icon: 'fa fa-star-o' }
                ]
            },
            html: { label: 'File Type', attr1: 'style="width: 300px"' }
        },
        { field: 'type', type: 'switch', required: true,
            options: {
                items: [
                    { id: 'some', tooltip: 'Star', icon: 'fa fa-star' },
                    { id: 'some2', tooltip: 'Empty star', icon: 'fa fa-star-o' },
                    { id: 'info', tooltip: 'Empty star', icon: 'fa fa-folder-o' },
                    { type: 'break' }
                ]
            },
            html: {
                label: 'Anchored',
                attr: 'style="width: 120px"',
                text: `
                    <span style="display: inline-block; padding-left: 5px">%input-min%</span>
                    <span style="display: inline-block; padding-left: 5px">%input-max%</span>
                `
            }
        },
        { field: 'min', type: 'text',
            html: {
                anchor: '%input-min%',
                label: '',
                attr: 'placeholder="max" style="width: 50px"'
            }
        },
        { field: 'max', type: 'text',
            html: {
                anchor: '%input-max%',
                label: '',
                attr: 'placeholder="max" style="width: 50px"'
            }
        },
        { field: 'comments',   type: 'textarea', html: { label: 'Comments', attr: 'style="width: 100%; height: 120px"' } }
    ],
    onChange(event) {
        console.log('change', event.detail, this.record)
    },
    record: {
        file_type: 'HTML',
        file_name: 'name'
    },
    actions: {
        Reset() {
            this.clear()
        },
        Save() {
            if (form.validate().length == 0) {
                w2popup.open({
                    title: 'Form Data',
                    with: 600,
                    height: 550,
                    body: `<pre>${JSON.stringify(this.getCleanRecord(), null, 4)}</pre>`,
                    actions: { Ok: w2popup.close }
                })
            }
        }
    }
})
</script>
